
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑器</title>


<style type="text/css">
:focus {outline: 0;}
.quan {float:left; border:1px solid #cdcdcd; background-color:#FFFFFF; border-radius:3px; margin-top:5px; margin-left:5px; overflow:hidden;}
.quan input{float:left; width:26px; height:26px; background-repeat:no-repeat; background-position:4px 4px; background-color:#FFFFFF; border:0px; cursor:pointer;}
.quan input:hover{ background-color:#dedede!important;}

.quan #ziti_button{float:left; width:52px; height:26px; font-size:14px; line-height:25px; padding-left:5px; border:0px; cursor:pointer; background-color:#FFFFFF; text-align:left; color:#555555; background-image:url(images/edit/sanjiao.png); background-repeat:no-repeat; background-position:right 5px top 11px;}
.quan #ziti_button:hover { background-color:#dedede!important;}
.quan #daxiao_button{float:left; width:52px; height:26px; font-size:14px; line-height:25px; padding-left:5px; border:0px; cursor:pointer; background-color:#FFFFFF; text-align:left; color:#555555; border-left:1px solid #cdcdcd; background-image:url(images/edit/sanjiao.png); background-repeat:no-repeat; background-position:right 5px top 11px;}
.quan #daxiao_button:hover { background-color:#dedede!important;}
.quan #yanse_button{float:left; width:40px; height:26px; font-size:16px; font-weight:bold; line-height:25px; padding-left:5px; border:0px; cursor:pointer; background-color:#FFFFFF; text-align:left; color:#555555;  border-left:1px solid #cdcdcd; background-image:url(images/edit/sanjiao.png); background-repeat:no-repeat; background-position:right 5px top 11px;}
.quan #yanse_button:hover { background-color:#dedede!important;}
.quan #beijing_button{float:left; width:40px; height:26px; font-size:16px; font-weight:bold; line-height:25px; padding-left:5px; border:0px; cursor:pointer; background-color:#FFFFFF; text-align:left; color:#555555; border-left:1px solid #cdcdcd; background-image:url(images/edit/sanjiao.png); background-repeat:no-repeat; background-position:right 5px top 11px;}
.quan #beijing_button:hover { background-color:#dedede!important;}



#ziti_choose {position:absolute; left:180px; top:36px; border:1px solid #cdcdcd; width:130px; border-radius:4px; overflow:hidden; display:none}
#ziti_choose input{border:0px; height:25px; line-height:25px; background-color:#f2f2f2; width:100%; text-align:left; padding-left:10px; cursor:pointer; font-size:12px;}
#ziti_choose input:hover{background-color:#cccccc!important;}

#daxiao_choose {position:absolute; left:235px; top:36px; border:1px solid #cdcdcd; width:80px; border-radius:4px; overflow:hidden; display:none}
#daxiao_choose input{border:0px; height:25px; line-height:25px; background-color:#f2f2f2; width:100%; text-align:left; padding-left:10px; cursor:pointer; font-size:12px;}
#daxiao_choose input:hover{background-color:#cccccc!important;}


#yanse_choose {position:absolute; left:230px; top:36px; border:1px solid #cdcdcd; width:190px; border-radius:4px; overflow:hidden; background-color:#f2f2f2; padding-bottom:15px; display:none}
#yanse_choose #wuyanse{float:left; border:0px; height:25px; line-height:23px; width:170px; text-align:center; margin-left:10px; margin-top:10px; cursor:pointer; background-color:#f2f2f2;}
#yanse_choose #wuyanse:hover{background-color:#cccccc!important;}
#yanse_choose input{float:left; border:0px; width:20px; height:20px; cursor:pointer; margin-top:10px; margin-left:10px; }

#beijing_choose {position:absolute; left:270px; top:36px; border:1px solid #cdcdcd; width:190px; border-radius:4px; overflow:hidden; background-color:#f2f2f2; padding-bottom:15px; display:none}
#beijing_choose #wuyanse{float:left; border:0px; height:25px; line-height:23px; width:170px; text-align:center; margin-left:10px; margin-top:10px; cursor:pointer; background-color:#f2f2f2;}
#beijing_choose #wuyanse:hover{background-color:#cccccc!important;}
#beijing_choose input{float:left; border:0px; width:20px; height:20px; cursor:pointer; margin-top:10px; margin-left:10px;}

#image_choose {width:788px; position:absolute; left:56px; top:40px;   border-radius:4px; overflow:hidden; background-color:#ffffff; display:none;}
#image_choose #insert_img{background-color: #9A4E4E; border:0px; width:100%; line-height:30px; font-size:14px; color:#ffffff; cursor:pointer;}
</style>

<script src="jq3.3.1.js"></script>

<SCRIPT type="text/javascript">
$(document).ready(function(){

	//获得URL参数
	let aid=RequestGet('aid');
	let bid=RequestGet('bid');
	
	if(!aid){aid='face'}
	if(!bid){bid='information'}
	
	let obja = $('#'+aid,parent.document);
	let objb = $('#'+bid,parent.document);
	
	//设置编辑器高度，textarea的高度和宽度
	let gao = obja.css('height');
	let kuan = obja.css('width');
	gao=parseInt(gao.replace('px',''));
	kuan=parseInt(kuan.replace('px',''));
	$('#box').css('height',(gao-56)+'px');
	$('#box2').css('height',(gao-50)+'px');
	$('#box2').css('width',(kuan-5)+'px');
	
	
	//获得父级默认内容，放到编辑器里去
	let content = objb.val();
	$('#box').html(content);
	$('#box2').val(content);
	
	//监听修改的内容（直接修改和html修改）
	$('#box').blur(function(){
		let content = $('#box').html();
		objb.val(content);
		$('#box2').val(content);
	})

	$('#box2').blur(function(){
		let content = $('#box2').val().replace(/[\r\n]/g,'');
		objb.val(content);
		$('#box').html(content);
	})
	
	//点击任意地方关闭弹窗
	$(document).click(function(){
		closeall();
	});
	$(parent.document).click(function(){
		closeall();
	});
	
	//开打弹窗
	$("#ziti_button").click(function(event){
		event.stopPropagation();
		closeall();
		$('#ziti_choose').show();
	});
	$("#daxiao_button").click(function(event){
		event.stopPropagation();
		closeall();
		$('#daxiao_choose').show();
	});
	$("#yanse_button").click(function(event){
		event.stopPropagation();
		closeall();
		$('#yanse_choose').show();
	});
	$("#beijing_button").click(function(event){
		event.stopPropagation();
		closeall();
		$('#beijing_choose').show();
	});
	$("#image_button").click(function(event){
		event.stopPropagation();
		closeall();
		$('#image_choose').show();
	});
	
	//阻止关闭弹窗(上传图片框)
	$("#image_choose").click(function(event){
		event.stopPropagation();
	});
	

	//box的click事件判断焦点，修改工具栏状态
	$('#box').click(function(){
		change_tool();
	})

})

//关闭所有弹窗
function closeall()
{
	$('#ziti_choose').hide();
	$('#daxiao_choose').hide();
	$('#yanse_choose').hide();
	$('#beijing_choose').hide();
	$('#image_choose').hide();
}


//工具栏的点击操作
function change(menu,value)
{
	$('#box').focus();
	document.execCommand(menu, false, value);
	change_tool();
}

//修改工具栏函数
function change_tool()
{
	//判断是否粗体
	if(document.queryCommandValue('Bold')=='true')
	{
		$('#oper2').children('input:eq(0)').css('background-color','#dedede');
	}
	else
	{
		$('#oper2').children('input:eq(0)').css('background-color','#ffffff');
	}
	
	//判断是否斜体
	if(document.queryCommandValue('Italic')=='true')
	{
		$('#oper2').children('input:eq(1)').css('background-color','#dedede');
	}
	else
	{
		$('#oper2').children('input:eq(1)').css('background-color','#ffffff');
	}
	
	//判断是否下划线
	if(document.queryCommandValue('Underline')=='true')
	{
		$('#oper2').children('input:eq(2)').css('background-color','#dedede');
	}
	else
	{
		$('#oper2').children('input:eq(2)').css('background-color','#ffffff');
	}
	
	//判断是否左对齐
	if(document.queryCommandValue('JustifyLeft')=='true')
	{
		$('#oper4').children('input:eq(0)').css('background-color','#dedede');
	}
	else
	{
		$('#oper4').children('input:eq(0)').css('background-color','#ffffff');
	}
	//判断是否居中对齐
	if(document.queryCommandValue('JustifyCenter')=='true')
	{
		$('#oper4').children('input:eq(1)').css('background-color','#dedede');
	}
	else
	{
		$('#oper4').children('input:eq(1)').css('background-color','#ffffff');
	}
	//判断是否右对齐
	if(document.queryCommandValue('JustifyRight')=='true')
	{
		$('#oper4').children('input:eq(2)').css('background-color','#dedede');
	}
	else
	{
		$('#oper4').children('input:eq(2)').css('background-color','#ffffff');
	}
	
}


//源代码切换
function change_source()
{
	if( $('#oper2').css('display') =='block' )
	{
		$('#oper1').children('input:eq(0)').css('background-color','#dedede');
		$('#oper2').hide();
		$('#oper3').hide();
		$('#oper4').hide();
		$('#oper5').hide();
		$('#box').hide();
		$('#box2').show();
	}
	else
	{
		$('#oper1').children('input:eq(0)').css('background-color','');
		$('#oper2').show();
		$('#oper3').show();
		$('#oper4').show();
		$('#oper5').show();
		$('#box').show();
		$('#box2').hide();
		
		//box获得内容
		//let content = $('#box2').val().replace(/[\r\n]/g,'');
		//change('selectAll','');
		//change('insertHTML',content);
		
		//重置工具栏
		$('#oper2').children('input:eq(0)').css('background-color','#ffffff');
		$('#oper2').children('input:eq(1)').css('background-color','#ffffff');
		$('#oper2').children('input:eq(2)').css('background-color','#ffffff');
		$('#oper4').children('input:eq(0)').css('background-color','#dedede');
		$('#oper4').children('input:eq(1)').css('background-color','#ffffff');
		$('#oper4').children('input:eq(2)').css('background-color','#ffffff');
	}
}



function updetails() {
	var details = $("#box2").val() //详情
	$.ajax({
		type: 'POST',
		url: '/smadmin/huoyuan/updetails_img',
		data: {goodsdetail:details},
		dataType: 'json',
		success: function (data) {
			var obj = eval(data);
			if (obj.code == 0) {
				$("#box2").val(obj.data)

				//box获得内容
				let content = $('#box2').val().replace(/[\r\n]/g,'');
				change('selectAll','');
				change('insertHTML',content);
			} else {
				alert(obj.message);
			}

		},
		error: function (xhr, type) {
			alert('网络错误');
		}
	});
}
</script>

<script type="text/javascript">
//获得URL参数的函数
function RequestGet(name)
{
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	if (r!=null) return unescape(r[2]); return null; //返回参数值
}
</script>


<script type="text/javascript">
$(document).ready(function(){

	
	//确定插入图片
	// $('#insert_img').click(function(){
	// 	let picurl = $('#picurl').val();
	// 	let picwidth = $('#picwidth').val();
	// 	let picheight = $('#picheight').val();
		
	// 	if( picurl )
	// 	{
	// 		let str='<img src="'+picurl+'" style="cursor:move" ';
	// 		if(picwidth){str = str + 'width="'+picwidth+'"'}
	// 		if(picheight){str = str + 'height="'+picheight+'"'}
	// 		if(!picwidth && !picheight)
	// 		{str = str + 'width="100%"'}
	// 		str = str + '>';
	// 		change('insertHTML',str);
	// 		closeall();
	// 	}
	// 	else
	// 	{
	// 		alert('未获得图片！');
	// 	}

	// })
	
	

	
})
function charu(){
		let picurl = $('#picurl').val();
		let picwidth = $('#picwidth').val();
		let picheight = $('#picheight').val();
		
		if( picurl )
		{
			var picurl_arrry=picurl.split(',')
			console.log(picurl_arrry)
			picurl_arrry.forEach((item, index, array) => {
			let str='<img src="'+item+'" style="cursor:move" ';
			if(picwidth){str = str + 'width="'+picwidth+'"'}
			if(picheight){str = str + 'height="'+picheight+'"'}
			if(!picwidth && !picheight)
			{str = str + ''}
			str = str + '>';
			change('insertHTML',str);
			closeall();
			
			});
			
			
			
			
			
		}
		else
		{
			alert('未获得图片！');
		}
	}
</script>


</head>
<body style="padding:0px; margin:0px;">


<div style="border:1px solid #cdcdcd; border-radius:4px; overflow:hidden;">

	<!--工具栏框-->
	<div style="background-color:#fafafa; height:38px; border-bottom:1px solid #cdcdcd; position:relative;" id="bianjiqi">
	
		<div id="oper1" class="quan">
			<input type="button" style="background-image:url(images/edit/edit1.png);" onclick="change_source()" title="HTML代码">
		</div>

		<div id="oper5" class="quan">
			<input type="button" class="anniu" style="background-image:url(images/edit/edit2.png); " onClick="change('undo','')" title="后退">
			<input type="button" class="anniu" style="background-image:url(images/edit/edit3.png); border-left:1px solid #cdcdcd;" onClick="change('redo','')" title="前进">
		</div>
		
		<div id="oper2" class="quan">
			<input type="button" style="background-image:url(images/edit/edit6.png); " onClick="change('Bold','')" title="粗体" >
			<input type="button" style="background-image:url(images/edit/edit7.png); border-left:1px solid #cdcdcd;" onClick="change('Italic','')" title="斜体">
			<input type="button" style="background-image:url(images/edit/edit8.png); border-left:1px solid #cdcdcd;" onClick="change('Underline','')" title="下划线">
		</div>
		
		<div id="oper3" class="quan">
			<input type="button" id="ziti_button" value="字体" title="文字字体">
			<input type="button" id="daxiao_button" value="大小" title="文字大小">
			<input type="button" id="yanse_button" value="A" title="文字颜色">
			<input type="button" id="beijing_button"  value="ab" title="背景颜色">
		</div>

		<div id="oper4" class="quan">
			<input type="button" style="background-image:url(images/edit/edit9.png);" onClick="change('JustifyLeft','')" title="左对齐">
			<input type="button" style="background-image:url(images/edit/edit10.png); border-left:1px solid #cdcdcd;" onClick="change('JustifyCenter','')" title="居中对齐">
			<input type="button" style="background-image:url(images/edit/edit11.png); border-left:1px solid #cdcdcd;" onClick="change('JustifyRight','')" title="右对齐">
			<input type="button" style="background-image:url(images/edit/edit12.png); border-left:1px solid #cdcdcd;" title="插入/上传图片" id="image_button">
		</div>
	

		
		<div id="ziti_choose">
			<input type="button" value="宋体" onClick="change('FontName','宋体')">
			<input type="button" value="黑体" onClick="change('FontName','黑体')">
			<input type="button" value="微软雅黑" onClick="change('FontName','微软雅黑')">
			<input type="button" value="Arial" onClick="change('FontName','Arial')">
			<input type="button" value="Arial Black" onClick="change('FontName','Arial Black')">
			<input type="button" value="Times New Roman" onClick="change('FontName','Times New Roman')">
			
		</div>
		
		<div id="daxiao_choose">
			<input type="button" value="1号" onClick="change('FontSize',1)">
			<input type="button" value="2号" onClick="change('FontSize',2)">
			<input type="button" value="3号" onClick="change('FontSize',3)">
			<input type="button" value="4号" onClick="change('FontSize',4)">
			<input type="button" value="5号" onClick="change('FontSize',5)">
			<input type="button" value="6号" onClick="change('FontSize',6)">
			<input type="button" value="7号" onClick="change('FontSize',7)">
		</div>
		
		<div id="yanse_choose">
			<input type="button" value="字体无颜色" id="wuyanse" onClick="change('ForeColor','#000000')">
			<input type="button" style=" background-color:#e53333;" onClick="change('ForeColor','#e53333')">
			<input type="button" style=" background-color:#e56600;" onClick="change('ForeColor','#e56600')">
			<input type="button" style=" background-color:#ff9900;" onClick="change('ForeColor','#ff9900')">
			<input type="button" style=" background-color:#64451d;" onClick="change('ForeColor','#64451d')">
			<input type="button" style=" background-color:#dfc5a4;" onClick="change('ForeColor','#dfc5a4')">
			<input type="button" style=" background-color:#ffe500;" onClick="change('ForeColor','#ffe500')">
			
			<input type="button" style=" background-color:#009900;" onClick="change('ForeColor','#009900')">
			<input type="button" style=" background-color:#006600;" onClick="change('ForeColor','#006600')">
			<input type="button" style=" background-color:#99bb00;" onClick="change('ForeColor','#99bb00')">
			<input type="button" style=" background-color:#b8d100;" onClick="change('ForeColor','#b8d100')">
			<input type="button" style=" background-color:#60d978;" onClick="change('ForeColor','#60d978')">
			<input type="button" style=" background-color:#00d5ff;" onClick="change('ForeColor','#00d5ff')">
			
			<input type="button" style=" background-color:#337fe5;" onClick="change('ForeColor','#337fe5')">
			<input type="button" style=" background-color:#003399;" onClick="change('ForeColor','#003399')">
			<input type="button" style=" background-color:#4c33e5;" onClick="change('ForeColor','#4c33e5')">
			<input type="button" style=" background-color:#9933e5;" onClick="change('ForeColor','#9933e5')">
			<input type="button" style=" background-color:#cc33e5;" onClick="change('ForeColor','#cc33e5')">
			<input type="button" style=" background-color:#ee33ee;" onClick="change('ForeColor','#ee33ee')">
			
			<input type="button" style=" background-color:#ffffff;" onClick="change('ForeColor','#ffffff')">
			<input type="button" style=" background-color:#cccccc;" onClick="change('ForeColor','#cccccc')">
			<input type="button" style=" background-color:#999999;" onClick="change('ForeColor','#999999')">
			<input type="button" style=" background-color:#666666;" onClick="change('ForeColor','#666666')">
			<input type="button" style=" background-color:#333333;" onClick="change('ForeColor','#333333')">
			<input type="button" style=" background-color:#000000;" onClick="change('ForeColor','#000000')">
		</div>
		
		
		<div id="beijing_choose">
			<input type="button" value="背景无颜色" id="wuyanse" onClick="change('BackColor','#ffffff')">
			<input type="button" style=" background-color:#e53333;" onClick="change('BackColor','#e53333')">
			<input type="button" style=" background-color:#e56600;" onClick="change('BackColor','#e56600')">
			<input type="button" style=" background-color:#ff9900;" onClick="change('BackColor','#ff9900')">
			<input type="button" style=" background-color:#64451d;" onClick="change('BackColor','#64451d')">
			<input type="button" style=" background-color:#dfc5a4;" onClick="change('BackColor','#dfc5a4')">
			<input type="button" style=" background-color:#ffe500;" onClick="change('BackColor','#ffe500')">
			
			<input type="button" style=" background-color:#009900;" onClick="change('BackColor','#009900')">
			<input type="button" style=" background-color:#006600;" onClick="change('BackColor','#006600')">
			<input type="button" style=" background-color:#99bb00;" onClick="change('BackColor','#99bb00')">
			<input type="button" style=" background-color:#b8d100;" onClick="change('BackColor','#b8d100')">
			<input type="button" style=" background-color:#60d978;" onClick="change('BackColor','#60d978')">
			<input type="button" style=" background-color:#00d5ff;" onClick="change('BackColor','#00d5ff')">
			
			<input type="button" style=" background-color:#337fe5;" onClick="change('BackColor','#337fe5')">
			<input type="button" style=" background-color:#003399;" onClick="change('BackColor','#003399')">
			<input type="button" style=" background-color:#4c33e5;" onClick="change('BackColor','#4c33e5')">
			<input type="button" style=" background-color:#9933e5;" onClick="change('BackColor','#9933e5')">
			<input type="button" style=" background-color:#cc33e5;" onClick="change('BackColor','#cc33e5')">
			<input type="button" style=" background-color:#ee33ee;" onClick="change('BackColor','#ee33ee')">
			
			<input type="button" style=" background-color:#ffffff;" onClick="change('BackColor','#ffffff')">
			<input type="button" style=" background-color:#cccccc;" onClick="change('BackColor','#cccccc')">
			<input type="button" style=" background-color:#999999;" onClick="change('BackColor','#999999')">
			<input type="button" style=" background-color:#666666;" onClick="change('BackColor','#666666')">
			<input type="button" style=" background-color:#333333;" onClick="change('BackColor','#333333')">
			<input type="button" style=" background-color:#000000;" onClick="change('BackColor','#000000')">
		</div>
		
		
		<div id="image_choose">
			<input type="hidden" id="picurl" value="">
			<input type="hidden" id="picwidth" value="">
			<input type="hidden" id="picheight" value="">
			
			<iframe id="getimage" src="editor_image.html?v=1.0.6" style="border:0px; width:790px; height:320px; overflow:hidden;"></iframe>
			<input type="button" id="insert_img" onclick="charu()" value="确定插入图片">
		</div>
		
		
	</div>
	
	<!--编辑框-->
	<div id="box" style="border:0px; overflow-y:auto; padding:5px;" contenteditable = "true"  tabindex="0"></div>
	
	<!--HTML框-->
	<textarea id="box2" style="display:none; width:100%; border:0px; resize:none;"></textarea>
</div>





</body>
</html>